<template>
  <div class="outer">
    <h1>App</h1>
    <List @atguigu="getListData"/>
  </div>
</template>

<script>
import _ from 'lodash'

import List from './components/List/List.vue'
export default {
name:'App',
data(){
  return{
    list:[]
  }
},
components:{
  List
},
methods: {
  //自定义事件的回调函数
  getListData(list){
    //自定义事件主要用来接收子组件的传参(子向父传值)
      //1.我们拿到值以后可以保存在自己的data中,data中尽量保存一个新的值(需要拷贝)
      // this.list = [...list];
      //2.如果数据比较复杂,我们需要对数据进行深拷贝(使用lodash的包提供的方法)
      this.list=_.cloneDeep(list)
  }
},
}
</script>

<style>
.outer{
  height: 400px;
  background: yellowgreen;
}
</style>